import React from 'react';
import style from './style.styl';
import cx from 'classnames';
import util from '../../../../util';
import {IconFont,Button,Input,Modal,success} from '../../../../ui-components';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux'
import * as reviewAction from '../../../../actions/review.action' 
import { verifyPassword } from '../../../../actions/auth.action'

const state_map = {
  1: '进行中',
  2: '进行中',
  3: '已完成',
  4: '已取消'
}
@connect(null,dispatch => ({actions: bindActionCreators({...reviewAction,verifyPassword}, dispatch)}))
class ReviewAdminItem extends React.Component {
  static contextTypes = {
    router: React.PropTypes.object
  }
  constructor(props) {
    super(props);
    this.displayName = 'ReviewAdminItem';
    this.state={
      cancelReviewActivity: false,
      deletePassword: '',
      deleteMsg: '',
    }
  }
  cancelReviewActivity = () => {
    this.props.actions.verifyPassword(this.state.deletePassword,(d) =>{
      if(!d.data) {
        this.setState({
          deleteMsg: '密码错误',
        });
        return;
      }
      this.props.actions.cancelReviewTemplate(this.props.item.templateId, () => {
        success('反馈活动已取消，未提交的反馈将自动备份发送到员工邮箱')
        this.props.actions.fetchReviewList({
          statuses: '1,2,3,4',
          pageNumber: 1,
          pageSize: 10000,
          type: 2
        }) 
      })
      this.setState({
        cancelReviewActivity: false
      })
    });
    
  }
  checkReview = () => {
    this.context.router.push(`/review/admin/${this.props.item.templateId}/report`)
  }
  render() {
    const {
      item,
      report,
    } = this.props;
    const {
      startTime: startTimeStamp,
      endTime: endTimeStamp,
      selfReviewDeadline: selfReviewDeadlineStamp,
      peerReviewDeadline: peerReviewDeadlineStamp,
      publicDeadline: publicDeadlineStamp,
      publishedTime: publishedTimeStamp,
      state,
      questions,
      templateName,
      invitedTeamVOs = [],
      isReviewerAnonymous,
    } = item;
    const now = Date.now();
    const startTime = util.time(+startTimeStamp);
    const endTime = util.time(+endTimeStamp);
    const selfReviewDeadline = util.time(+selfReviewDeadlineStamp);
    const peerReviewDeadline = util.time(+peerReviewDeadlineStamp);
    const publishedTime = util.time(+publishedTimeStamp);
    const publicDeadline = util.time(+publicDeadlineStamp);
    const itemState = state === 2 && now > publicDeadlineStamp ? 3 : state;
    const indexFlag = itemState === 1 ? 0 :
      now > publicDeadlineStamp ? 4 : 
      now > peerReviewDeadlineStamp ? 3 : 
      now > selfReviewDeadlineStamp ? 2 : 
      now > publishedTimeStamp ? 1 : 0;
    let linePercent = indexFlag * 33 - 16.5;
    return (
      <div className={cx({
        [style['page']]: true,
        [style['admin-item']]: true,
        [style['admin-report']]: report,
      })}>
        <div className={style['admin-title']}>
          {report ? <div className={style['admin-back']} onClick={()=>{location.href='/#/review/admin'}}></div> : null}
          {templateName}
          <div className={style[`admin-tag${itemState}`]}>{state_map[itemState]}</div>
        </div>
        <div className={style['admin-btn-area']}>
          {
            !report && itemState < 4 ? 
            <Button label={'查看报告'} onClick={this.checkReview} />
            : null
          }
          {
            !report && itemState === 2 ?
            <Button label={'取消活动'} blueLine className={style['cancel-btn']} onClick={() => {this.setState({cancelReviewActivity: true})}} />
            : null
          }
        </div>
        <div className={style['admin-info']}>
          <span>{`对应工作时间：${startTime}~${endTime}`}</span>
          <span>{`参与部门：${invitedTeamVOs.map(v => v && v.teamName).join('，')}`}</span>
          <span>{`类型：${isReviewerAnonymous ? '匿名反馈' : '实名反馈'}`}</span>
        </div>
        <div className={style['admin-h2']}>通用问题</div>
        {
          questions.map((v, i) => {
            return (
              <div className={style['question-item']} key={i}>
                <IconFont value='weixin' className={style['icon']}/>
                <div className={style['question-content']}>{v}</div>
              </div>
            )
          })
        }
        <div style={{overflow: 'hidden'}}>
          <div className={style['admin-line']}>
            <div className={style['admin-line-layout']}>
              <div className={cx({
                [style['admin-line-item']]: true,
                [style['active']]: indexFlag > 0,
                [style['current']]: indexFlag === 1,
              })}>
                <p>发起</p>
                <aside>{publishedTime}</aside>
              </div>
              <div className={cx({
                [style['admin-line-item']]: true,
                [style['active']]: indexFlag > 1,
                [style['current']]: indexFlag === 2,
              })}>
                <p>自评截止</p>
                <aside>{selfReviewDeadline}</aside>
              </div>
              <div className={cx({
                [style['admin-line-item']]: true,
                [style['active']]: indexFlag > 2,
                [style['current']]: indexFlag === 3,
              })}>
                <p>同事反馈截止</p>
                <aside>{peerReviewDeadline}</aside>
              </div>
              <div className={cx({
                [style['admin-line-item']]: true,
                [style['active']]: indexFlag > 3,
                [style['current']]: indexFlag === 4,
              })}>
                <p>流程结束</p>
                <aside>{publicDeadline}</aside>
              </div>
              <div className={style['admin-line-time']} style={{width: `${linePercent}%`}}></div>
            </div>
          </div>
        </div>
        <Modal
          title={`确认取消反馈活动【${templateName}】`}
          onRequestClose={() => this.setState({ cancelReviewActivity: false })}
          active={this.state.cancelReviewActivity}
        >
          <div className={style['delete-area']}>
            <p>取消当前反馈活动，反馈流程将立即终止，本次活动的所有反馈邀请将自动取消；已填写但未提交的自评/反馈将自动删除并发送到备份填写者邮箱。<span>此操作不可逆</span></p>
            <p>如确定要删除，请输入登录密码，并点击下方按钮：</p>
            <input type="password" value={this.state.deletePassword} onChange={(e)=>this.setState({deletePassword:e.target.value, deleteMsg:''})}/>
            <div className={style['delete-msg']}>{this.state.deleteMsg}</div>
            <Button style={{ width: '100%', marginTop: '10px',height:'36px' }} disabled={!this.state.deletePassword} blue  label="取消反馈活动" onClick={::this.cancelReviewActivity} />
          </div>
        </Modal> 
      </div>
    );
  }
}

export default ReviewAdminItem;
